Confirm?

Are you sure you want to proceed?
M
Muthu Kumaran

Waterbalance Software Login Page

Clone & Customize via AI

A Blazor Dashboard that presents KPI cards, a real-time SVG chart, controls and an alerts panel. Uses Tailwind layout utilities and includes an EditForm login with DataAnnotations validation.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Top navigation and controls row with live updates toggle, range selector (InputSelect) and action buttons. - KPI cards for consumption, flow rate, pressure and efficiency. - Tank level bar and a system status list. - Real-time style line chart rendered as an inline SVG polyline. - Alerts panel with action buttons and recent activity list. - Separate login page using EditForm with DataAnnotations validation and ValidationMessage displays. ## Key components - EditForm, DataAnnotationsValidator, ValidationMessage - InputText, InputCheckbox, InputSelect with @bind-Value - SVG polyline used for the chart (ChartPoints property) - Model classes: DashboardStatsModel, AlertModel, LoginViewModel - Typical Blazor lifecycle: StateHasChanged and event handlers (Refresh, HandleValidLogin) ## How it works - Data binding uses @bind-Value on InputText, InputCheckbox and InputSelect to sync UI and view models. - EditForm triggers OnValidSubmit to run HandleValidLogin; DataAnnotationsValidator enforces validation rules declared on LoginViewModel. - The Refresh method simulates data updates (randomized values) and calls StateHasChanged to re-render KPI values and the chart. - ChartPoints is a computed property that converts a List<double> (FlowSeries) into an SVG polyline point string for the inline SVG chart. - Alerts iterate over a list of AlertModel instances; alert actions (Ack, X) are UI-only and need backend wiring to persist state. ## Styling - Uses Tailwind CSS utility classes throughout (flex, grid, gap-*, px-*, text-*, bg-*, rounded-*, sm:/lg: responsive prefixes). - Layout is responsive via grid and breakpoint classes (sm:grid-cols-2, lg:grid-cols-4, lg:col-span-*). - Icons reference Font Awesome CSS classes (fas fa-*) and require icon font inclusion. - Chart is a simple SVG without a charting library; tank level uses inline width styles for a progress effect. ## Reuse steps 1. Add the Razor pages and model classes to a Blazor project (Pages and shared Models folders). 2. Ensure Tailwind CSS or equivalent utility CSS is included, or adapt classes to project CSS. 3. Include Font Awesome or replace icon markup with available icon set. 4. Wire real data: replace sample DashboardStatsModel.Sample() and AlertModel.SampleAlerts() with API calls or a service registered in Program.cs. 5. Optionally add SignalR or a polling service for liveUpdates; implement backend endpoints for authentication and alert handling. ## Limitations & next steps - The sample uses mock data and local randomization; persistence, API integration and authentication are not implemented. - LiveUpdates toggle is present in the UI but does not enable a real-time data stream; integrate SignalR or timed polling to enable. - The SVG chart is rudimentary (no axes, tooltips or zoom); integrate a charting library for advanced visuals and accessibility. - Alert buttons are UI-only; implement server-side acknowledgement and state management for production use. - Accessibility and ARIA attributes are minimal; add labels and keyboard handling for improved compliance.